<template>
  <a-modal v-model:visible="visible" :title="title" @ok="printFun" :width="800">
    <template slot="footer">
      <a-button type="primary" v-print="'#print-main'">确认打印</a-button>
    </template>
    <div id="print-main" ref="printRef">
      <a-table rowKey="productSpec" :dataSource="specList" :columns="boxBarcolumns" :pagination="false" />
    </div>
  </a-modal>
</template>

<script>
import printJs from 'print-js'
import { querySpecInfoByBoxBar } from '@/api/order.js'
export default {
  name: 'PrintDetailModel',
  data() {
    return {
      title: '',
      visible: false,
      infoData: {},
      specList: [],
      boxBarcolumns: [
        {
          title: '规格型号',
          align: 'center',
          dataIndex: 'productSpec',
          width: 120,
          //   sorter: true,  排序
        },
        {
          title: '数量',
          align: 'center',
          width: 100,
          dataIndex: 'amount',
        },
      ],
    }
  },
  methods: {
    printFun() {
      printJs({
        printable: this.$refs.printRef,
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
      })
    },
    handleCancel() {
      this.close()
    },
    show(bar) {
      this.visible = true
      this.bar = bar
      this.getSpecInfoByBoxBar()
    },
    close() {
      this.visible = false
    },
    async getSpecInfoByBoxBar() {
      try {
        const result = await querySpecInfoByBoxBar({ bar: this.bar })
        this.title = result.result.warehouseName
        this.specList = result.result.specList
      } catch (err) {
        console.log(err);
        throw err
      }
    },
  },
}
</script>
